<template>
  <div>
    <div id="XHSFleet" v-if="fleetPower">
      <i-button type="primary" style="margin-bottom:5px;" @click="addTruckXHSFleet">新增车辆</i-button>
      <tablePage ref="containerTab" :staticData="truckList" :isStartLoad="true" :mode="1" @pageChangeIndex="pageChangeIndex">
        <template slot-scope="props">
          <Table :columns="columns7" border :data="props.data" @on-sort-change="props.sortChange"></Table>
        </template>
      </tablePage>
      <Modal
        :visible.sync="modalXHSEdit"
        v-model="modalXHSEdit"
        title="车辆信息编辑"
        @on-ok="okXHS">
        <span>车队：&nbsp;&nbsp;&nbsp;</span>
        <Select v-model="tableDataDetail.fleetId" style="width:200px">
          <Option v-for="item in fleetList" :value="item.id" :key='item.id'>{{item.login_name}}</Option>
        </Select>
        <div style="width:100%;height:20px;"></div>
        <span>车牌号：&nbsp;&nbsp;&nbsp;</span>
        <Input v-model="tableDataDetail.truckNo" placeholder="请输入车牌号" style="width: 200px"></Input>
        <div style="width:100%;height:20px;"></div>
        <span>车辆类型：</span>
        <Select v-model="tableDataDetail.TYPE" style="width:200px">
          <Option v-for="item in cityList" :value="item.id" :key='item.name'>{{item.name}}
          </Option>
        </Select>
      </Modal>
      <Modal
        v-model="modalxhs"
        title="添加车辆"
        @on-ok="addConfirmXHSFleet">
        <span>车队：&nbsp;&nbsp;&nbsp;</span>
        <Select v-model="addDataXHS.fleetId" style="width:200px">
          <Option v-for="item in fleetList" :value="item.id" :key='item.id'>{{item.login_name}}</Option>
        </Select>
        <div style="width:100%;height:20px;"></div>
        <span>车牌号：&nbsp;&nbsp;&nbsp;</span>
        <Input v-model="addDataXHS.truckNo" placeholder="输入车牌号" style="width: 200px"></Input>
        <div style="width:100%;height:20px;"></div>
        <span>车辆类型：</span>
        <Select v-model="addDataXHS.type" style="width:200px">
          <Option v-for="item in cityList" :value="item.id" :key='item.name'>{{item.name}}</Option>
        </Select>
      </Modal>
    </div>

    <div id="otherFleet" v-if="!fleetPower">
      <!-- 车辆列表 2018/3/7 11:09 zhangQ -->
      <i-button type="primary" style="margin-bottom:5px;" @click="addTruck">新增车辆</i-button>
      <!--<tablePage ref="containerTab" :staticData="truckList" :isStartLoad="false" :mode="1">
        <template slot-scope="props">
          <Table :columns="columns7" border :data="props.data" @on-sort-change="props.sortChange"></Table>
        </template>
      </tablePage>-->
      <tablePage ref="containerTab" :api="getTruckListByPage" :param="tabParam" @pageChangeIndex="pageChangeIndex">
        <template slot-scope="props">
          <Table :columns="columns7" :data="props.data"></Table>
        </template>
      </tablePage>
      <Modal
        :visible.sync="modal1"
        v-model="modal1"
        title="车辆信息编辑"
        @on-ok="ok">
        <span>车牌号：&nbsp;&nbsp;&nbsp;</span>
        <Input v-model="tableDataDetail.truckNo" placeholder="请输入车牌号" style="width: 200px"></Input>
        <div style="width:100%;height:20px;"></div>
        <span>车辆类型：</span>
        <Select v-model="tableDataDetail.TYPE" style="width:200px">
          <Option v-for="item in cityList" :value="item.id" :key='item.name'>{{item.name}}</Option>
        </Select>
      </Modal>
      <Modal
        v-model="modal2"
        title="添加车辆"
        @on-ok="addConfirm">
        <span>车牌号：&nbsp;&nbsp;&nbsp;</span>
        <Input v-model="addData.truckNo" placeholder="输入车牌号" style="width: 200px" @on-change="verifyTruckNo" @on-blur="upperTruckNo"></Input>
        <div style="width:100%;height:20px;"></div>
        <span>车辆类型：</span>
        <Select v-model="addData.type" style="width:200px">
          <Option v-for="item in cityList" :value="item.id" :key='item.name'>{{item.name}}</Option>
        </Select>
      </Modal>
    </div>
  </div>
</template>
<script>
  import {
    getTruckListByPage,
    getTruckTypeList,
    editTruck,
    editTruckXHS,
    deleteTruck,
    deleteTruckXHS,
    getTruckListByPageXHS,
    getOwnFleet,
    addTruckXHS,
    addTruck
  } from '@api/backEnd/fleetControl'
  import tablePage from '@components/table/tablePage.vue'
  import _ from 'lodash'

  export default {
    name: 'truckList',
    data () {
      let fleetList = []
      let truckList = []
      let tabParam = {}
      let modal1 = false
      let modal2 = false
      let modalxhs = false
      let modalXHSEdit = false
      let indeterminate = true
      let checkAll = false
      let a = 1
      let self = this
      let fleetPower = powerUtil.contains('xhsFleetPower') ? true : false
      let pageDefault = {
        pageIndex: 1,
        pageSize: 10
      }
      let columns7 = [
        {
          title: '序号',
          width: 100,
          render: (h, params) => {
            let thisIndex = params.row._index + 1
            if (this.pageDefault.pageIndex > 1) {
              thisIndex = thisIndex + (this.pageDefault.pageIndex - 1) * this.pageDefault.pageSize
            }
            return (<span>{thisIndex}</span>)
          }
        },
        // {
        //   title: '序号',
        //   key: 'id'
        // },
        {
          title: '车牌号',
          key: 'truckNo'
        },
        {
          title: '车辆类型',
          key: 'name'
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '8px'
                },
                on: {
                  click: (value, row) => {
                    /* this.modal1 = true
                    let id = params.row.id
                    this.truckInfo(id)
                    this.getTruckType() */
                    this.showModel1(params.row)
                  }
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.$Modal.confirm({
                      content: '确定删除？',
                      onOk: () => {
                        let id = params.row.id
                        this.dataDelete(id)
                      }
                    })
                  }
                }
              }, '删除')
            ])
          }
        }
      ]
      if (powerUtil.contains('xhsFleetPower')) {
        columns7 = [
          {
            title: '序号',
            key: 'id'
          },
          {
            title: '车牌号',
            key: 'truckNo'
          },
          {
            title: '车辆类型',
            key: 'name'
          },
          {
            title: '车队',
            key: 'fleetname'
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '8px'
                  },
                  on: {
                    click: (value, row) => {
                      /* this.modal1 = true
                      let id = params.row.id
                      this.truckInfo(id)
                      this.getTruckType() */
                      this.showModalXHSEdit(params.row)
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        content: '确定删除？',
                        onOk: () => {
                          this.dataDeleteXHS(params.row)
                        }
                      })
                    }
                  }
                }, '删除')
              ])
            }
          }
        ]
      }
      let tableDataDetail = {
        TYPE: '',
        id: '',
        truckNo: '',
        type_name: '',
        fleetId: ''
      }
      let addData = {
        truckNo: '',
        type: ''
      }
      let addDataXHS = {
        fleetId: '',
        truckNo: '',
        type: ''
      }
      let cityList = []
      let currentRowXHS = []
      let datas = {
        pageDefault,
        currentRowXHS,
        modal1,
        modal2,
        indeterminate,
        checkAll,
        a,
        self,
        columns7,
        tableDataDetail,
        addData,
        cityList,
        tabParam,
        fleetPower,
        modalxhs,
        truckList,
        fleetList,
        addDataXHS,
        modalXHSEdit,
        getTruckListByPage
      }
      return datas
    },
    computed: {},
    methods: {
      pageChangeIndex (pageIndex, pageSize) {
        console.log(123123123)
        this.pageDefault.pageIndex = pageIndex
        this.pageDefault.pageSize = pageSize
      },
      dataRefresh () {
        this.$refs.containerTab.dataRefresh()
        this.pageDefault = {
          pageIndex: 1,
          pageSize: 10
        }
      },
      verifyTruckNo () {
        setTimeout(() => {
          let maxLength = 7
          console.log(this.addData.truckNo)
          if (this.addData.truckNo.length > maxLength) {
            this.addData.truckNo = String(this.addData.truckNo).slice(0, maxLength)
          }
          console.log(this.addData.truckNo)
        }, 200)
      },
      upperTruckNo () {
        setTimeout(() => {
          this.addData.truckNo = String(this.addData.truckNo).toUpperCase()
        }, 200)
      },
      getAllFleetList () {
        getOwnFleet().then(res => {
          if (res.data.isSuccess === 1) {
            this.fleetList = res.data.data
          }
        })
      },
      getTruckListXHS () {
        getTruckListByPageXHS({}).then(res => {
          if (+res.data.isSuccess === 1) {
            this.truckList = res.data.data.rows
            // this.$refs['containerTab'].dataRefresh()
            this.dataRefresh()
          }
        })
      },
      getTruckList () {
        getTruckListByPage({}).then(res => {
          if (+res.data.isSuccess === 1) {
            console.log(res.data.data)
            this.truckList = res.data.data.rows
          }
        })
      },
      show (index) {
        this.$Modal.info({
          title: '用户信息',
          content: `姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}`
        })
      },
      remove (index) {
        this.data6.splice(index, 1)
      },
      showModel1 (row) {
        this.modal1 = true
        this.tableDataDetail.TYPE = row.type
        this.tableDataDetail.type_name = row.name
        this.tableDataDetail.id = row.id
        this.tableDataDetail.truckNo = row.truckNo
        this.tableDataDetail.fleetId = row.fleetid
      },
      showModalXHSEdit (row) {
        this.modalXHSEdit = true
        this.tableDataDetail.TYPE = row.type
        this.tableDataDetail.type_name = row.name
        this.tableDataDetail.id = row.id
        this.tableDataDetail.truckNo = row.truckNo
        this.tableDataDetail.fleetId = row.fleetid
        this.currentRowXHS = row
      },
      getTruckType () {
        getTruckTypeList().then(res => {
          this.cityList = res.data.data
        })
      },
      ok () {
        editTruck({
          id: this.tableDataDetail.id,
          truckNo: this.tableDataDetail.truckNo,
          type: this.tableDataDetail.TYPE
        }).then(res => {
          if (res.data.isSuccess === 1) {
            // this.$refs['containerTab'].dataRefresh()
            this.dataRefresh()
            this.$Message.success('修改成功')
          } else {
            this.$Message.error(res.data.res)
          }
        })
      },
      okXHS () {
        editTruckXHS({
          id: this.tableDataDetail.id,
          truckNo: this.tableDataDetail.truckNo,
          type: this.tableDataDetail.TYPE,
          fleetId: this.tableDataDetail.fleetId
        }).then(res => {
          if (res.data.isSuccess === 1) {
            let type = this.tableDataDetail.TYPE
            let fleetId = this.tableDataDetail.fleetId
            this.currentRowXHS.type = type
            this.currentRowXHS.id = this.tableDataDetail.id
            this.currentRowXHS.truckNo = this.tableDataDetail.truckNo
            this.currentRowXHS.fleetid = fleetId
            let resSourceTruckTypeName = _.filter(this.cityList, (item) => {
              return item.id === type
            })
            this.currentRowXHS.name = resSourceTruckTypeName[0].name
            let resSourceFleetName = _.filter(this.fleetList, (item) => {
              return item.id === fleetId
            })
            this.currentRowXHS.fleetname = resSourceFleetName[0].login_name
            this.truckList[this.currentRowXHS._index] = this.currentRowXHS
            // this.$refs['containerTab'].dataRefresh()
            this.dataRefresh()
            this.$Message.success('修改成功')
          } else {
            this.$Message.error(res.data.res)
          }
        })
      },
      dataDelete (val) {
        deleteTruck({
          id: val
        }).then(res => {
          if (+res.data.isSuccess === 1) {
            // this.$refs['containerTab'].dataRefresh()
            this.dataRefresh()
            this.$Message.success('删除成功')
          } else {
            this.$Message.error(res.data.res)
          }
        })
      },
      dataDeleteXHS (val) {
        deleteTruckXHS({
          id: val.id,
          fleetId: val.fleetId
        }).then(res => {
          if (+res.data.isSuccess === 1) {
            this.getTruckListXHS()
            this.$Message.success('删除成功')
          } else {
            this.$Message.error(res.data.res)
          }
        })
      },
      addTruck (val) {
        this.modal2 = true
      },
      addTruckXHSFleet (val) {
        this.modalxhs = true
      },
      addConfirm () {
        addTruck({
          truckNo: this.addData.truckNo,
          type: this.addData.type
        }).then(res => {
          if (res.data.isSuccess === 1) {
            // this.$refs['containerTab'].dataRefresh()
            this.dataRefresh()
            this.$Message.info('添加成功')
          } else {
            this.$Message.info(res.data.res)
          }
        })
      },
      addConfirmXHSFleet () {
        addTruckXHS({
          truckNo: this.addDataXHS.truckNo,
          type: this.addDataXHS.type,
          fleetId: this.addDataXHS.fleetId
        }).then(res => {
          if (res.data.isSuccess === 1) {
            this.getTruckListXHS()
            this.$Message.info('添加成功')
          } else {
            this.$Message.info(res.data.res)
          }
        })
      }
    },
    mounted () {
      this.getTruckType()
      if (powerUtil.contains('xhsFleetPower')) {
        this.getAllFleetList()
        this.getTruckListXHS()
      } else {
        this.getTruckList()
      }
    },
    components: {tablePage}
  }
</script>
<style scoped>

</style>
